<!--<template>-->
<!--  <div class="scale-container">-->
<!--    <div class="container">-->
<!--      ss-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "SystemIndex",-->
<!--  data() {-->
<!--    return {}-->
<!--  },-->
<!--  mounted() {-->
<!--    this.handleResize();-->
<!--    window.addEventListener('resize', this.handleResize);-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    window.removeEventListener('resize', this.handleResize);-->
<!--  },-->
<!--  methods: {-->
<!--    handleResize() {-->
<!--      const scaleContainer = document.querySelector('.scale-container');-->

<!--      const scaleX = window.innerWidth / 1920;-->
<!--      const scaleY = window.innerHeight / 1080;-->
<!--      const scale = Math.min(scaleX, scaleY);-->

<!--      scaleContainer.style.transform = `scale(${scale})`;-->
<!--      scaleContainer.style.transformOrigin = 'top left';-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--body {-->
<!--  margin: 0;-->
<!--  padding: 0;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.scale-container {-->
<!--  width: 1920px;-->
<!--  height: 1080px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  align-items: center;-->
<!--  background: url("../../assets/img/背景层-波浪纹理&#45;&#45;科技感.png") no-repeat;-->
<!--  opacity: 0.8;-->
<!--}-->

<!--.container {-->
<!--  width: 1920px;-->
<!--  height: 1080px;-->
<!--  background: url("../../assets/img/背景-蓝色-城市天际线.png") no-repeat;-->
<!--  opacity: 1;-->
<!--  background-size: 100% 100%;-->
<!--}-->
<!--</style>-->


<template>
  <div class="scale-screen-wrapper">
    <!-- 此div固定为设计稿尺寸，并通过transform进行缩放和居中 -->
    <div
        class="screen-container"
        :style="{
        transform: `scale(${scale}) translate(-50%, -50%)`,
        width: `${baseWidth}px`,
        height: `${baseHeight}px`
      }"
    >
      <slot>
        <div class="content">
          <div class="left">左</div>
          <div class="right">右</div>
        </div>

      </slot> <!-- 你的大屏内容放在这里 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScaleScreen',
  props: {
    // 允许自定义设计稿尺寸，默认为 1920x1080
    baseWidth: {
      type: Number,
      default: 1920
    },
    baseHeight: {
      type: Number,
      default: 1080
    }
  },
  data() {
    return {
      scale: 1 // 初始缩放比例
    };
  },
  mounted() {
    this.updateScale();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    updateScale() {
      const { innerWidth: winWidth, innerHeight: winHeight } = window;
      // 计算宽高方向的缩放比，并取最小值以保证内容完全显示
      const scaleX = winWidth / this.baseWidth;
      const scaleY = winHeight / this.baseHeight;
      this.scale = Math.min(scaleX, scaleY);
    },
    // 添加防抖优化 resize 事件[5](@ref)
    handleResize: (function() {
      this.updateScale();
    }, 250)
  }
};
</script>

<style scoped>
.scale-screen-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative; /* 为绝对定位的子容器提供参考 */
  background: url("../../assets/img/背景-蓝色-城市天际线.png") no-repeat;
}

.screen-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0; /* 缩放变换的原点设置在左上角 */
  /* width, height 和 transform 由 JS 动态计算和内联样式设置 */
}

.content {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  //justify-items: center;
}
.content .left {
  background-color: #5ac557;
  width: 300px;
  height: 200px;
}
.content .right {
  background-color: #b1b942;
  width: 300px;
  height: 200px;
}
</style>